<%@page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 引入header的css 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/header.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 头部 -->
<header class="container-fluid">
    <!-- 顶部 start -->
    <div class="row site-topbar">
        <ul class="container site-topbar-container">
            <c:if test="${not empty loginUser}">
            <li class="site-topbar-info">${loginUser.username}</li>
            <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/order/list">我的订单</a></li>
                <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/admin/index">管理端</a></li>
            <li class="site-topbar-info"><a href="javascript:;" onclick="logout()">退出</a></li>
            </c:if>
            <c:if test="${empty loginUser}">
                <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a></li>
                <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/jsp/register.jsp">注册</a></li>
                <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/admin/index">管理端</a></li>
            </c:if>
            <li class="site-topbar-info"><a href="${pageContext.request.contextPath}/cart/list"><i class="glyphicon glyphicon-shopping-cart"></i> 购物车</a>
            </li>
        </ul>
    </div>
    <!-- 顶部 end -->
    <!-- 导航栏 start -->
    <div class="row">
        <div class="container site-nav-container">
            <div class="logo">
                <img src="${pageContext.request.contextPath}/assets/images/logo.png" title="睿道商城">
            </div>
            <ul id="categoryUi" class="nav">
                <%--<li><a href="${pageContext.request.contextPath}/product-category?cid=1">手机</a></li>--%>
            </ul>
            <div class="search-container">
                <input type="text">
                <a class="search-button"><i class="glyphicon glyphicon-search"></i></a>
            </div>
        </div>
    </div>
    <!-- 导航栏 end -->
</header>
<script>
    $(function () {
        $.ajax({
            type: "get",
            url: "${pageContext.request.contextPath}/category/list",
            dataType: "json",
            success: function (data) {
                console.log(data);
                var str = '';
                for (var i = 0; i < data.length; i++) {
                    str += `<li><a href="${pageContext.request.contextPath}/product/category?cid=\${data[i].cid}&currentPage=1&pageSize=10">\${data[i].cname}</a></li>`;
                }
                $('#categoryUi').html(str);
            },
            error: function (data) {
            }
        });
    });
    function logout() {

        $.ajax({
            data:"get",
            url:"${pageContext.request.contextPath}/user/logout",
            success:function (data) {
                if (data.code==1){
                    window.location.href="${pageContext.request.contextPath}/index"
                }
            }
        })
    }
</script>
</body>
</html>
